<!--
 * @Author: coman
 * @LastEditors: coman
 * @Date: 2020-06-23 21:26:08
 * @motto: No pain,No gain
 * @LastEditTime: 2020-06-24 10:01:38
--> 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            margin-top: 10px;
            border-spacing: 0;
            border-collapse: collapse;
        }
        th, td, tr{
            width: 200px;
            height: 100px;
            border: 1px solid #333333;
            text-align: center;
            line-height: 100px;
        }
        tr input{
            outline: none;
            background: rgb(59, 162, 194);
            border: none;
            text-align: center;
            height: 20px;
        }
    </style>
</head>
<body>
    <label for="">姓名</label>
    <input type="text" name="" id="userName">
    <label for="">年龄</label>
    <input type="text" name="" id="age">
    <label for="">电话</label>
    <input type="text" name="" id="tel">
    <label for="">QQ号</label>
    <input type="text" name="" id="qq">
    <button id="btn">保存</button>
    
       <table id="output">
        <thead>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>电话</th>
            <th>QQ</th>
            <th>操作</th>
        </thead>
        
    </table>
    
    <script>
  
      var btn = document.querySelector("#btn");
      var id = 0;
      var arr=[];
      var obj={};
      var output = document.querySelector("#output");
      var tbody = document.createElement("tbody");
      output.appendChild(tbody);
      btn.onclick=function(){
       
        var userName = document.querySelector("#userName");
        obj["userName"]=userName.value;
        var age = document.querySelector("#age");
        obj["age"]=age.value;
        var tel = document.querySelector("#tel");
        obj["tel"]=tel.value;
        var qq =document.querySelector("#qq");
        obj["qq"]=qq.value;
        var tr = document.createElement("tr");
        arr.push(obj);
        console.log(arr);
        var td = document.createElement("td");
        td.innerHTML=arr.length;
        tr.appendChild(td);
       
        for(var key in obj){
            var td = document.createElement("td");
            td.innerHTML=obj[key];
            tr.appendChild(td);
        }
        var td = document.createElement("td");
        var btn1 = document.createElement("button");
        btn1.innerHTML="删除";
        td.appendChild(btn1);
        tr.appendChild(td);
        userName.value="";
        age.value="";
        tel.value="";
        qq.value="";
        tbody.appendChild(tr);
     
      var btn_num = document.querySelectorAll("tr button");
        console.log(btn_num);
        
        for(let i=0;i<(btn_num.length);i++){
            btn_num[i].onclick = function(){
                tbody.removeChild(this.parentNode.parentNode);
            }
        }
        // 修改
        var modify = document.querySelectorAll("td");
        console.log(modify);
        // 点击次数
         click_time=0;
        for(var i=1;i<modify.length;i++){
            if((i+1)%6===0 ||i%6===0){continue}
              else  {
                    modify[i].ondblclick=function(){
                    if(click_time==0 )
                 {
                    click_time=1
                    var input=document.createElement("input");
                    input.setAttribute("value",this.innerHTML);
                    this.innerHTML="";
                    this.appendChild(input);
                    var inputele=this.children[0];                
                    inputele.onblur=function(){
                        
                        click_time=0;
                        
                        console.log(input.getAttribute("value"));
                        
                        this.parentNode.innerHTML=this.value;
                }
                    }
                    
                }}
            
        }
      }
      
    </script>
</body>
</html>